<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%@ include file="include.jsp" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ include file="menu.jsp" %>
<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

        $(".project_body").hide();

        $(".project_head").click(function() {
            $(this).next(".project_body").slideToggle(500)
            return false;
        });

        $(".project_head").find("a").click(function() {
            window.location = $(this).attr("href");
        });

        $(".add_new_user").click(function() {
            $(this).next(".all_users").show();
            return false;
        });


        $(".add_user").click(function() {
            var userId = $(this).prev(".newUser").val();
            var projectId = $(this).parent().parent().parent().parent().attr("id");
            $(this).parent(".all_users").hide();
            $.post("addUser.htm", { userId: userId, projectId: projectId },
                    function(data) {
                        if (data.indexOf('Error') == -1) {
                            //window.location = 'createProject.htm'
                            var array = data.split(';')
                            var firstName = array[0].split(':')[1];
                            var lastName = array[1].split(':')[1];
                            var status = array[2].split(':')[1];
                            var alias = array[3].split(':')[1];
                            var class = "class=active";
                            if (status == 'inactive') class = "class=inactive";

                            $("#users" + projectId).append('<tr id="' + userId+ '"><td>' + lastName + ' ' + firstName + '</td><td align="center"' + class + '>' +
                                                           alias + '</td><td align="center"><a href="#" onclick="delElement( this ); return false;" class="deleteUser" title="Delete User"><img style="border:0px;" src="../images/delete_red.png" alt="Delete"></a></td></tr>');
                        } else {
                            alert(data);
                        }
                    });


        });

        //        $(".deleteUser").click(function() {
        //            var userId = $(this).parent().parent().attr("id");
        //            var projectId = $(this).parent().parent().parent().parent().parent().attr("id");
        //            $.post("deleteUser.htm", { userId: userId, projectId: projectId },
        //                    function(data) {
        //                        if (data == '') {
        //                            $("#" + projectId).find("#" + userId).remove();
        //                        } else {
        //                            alert(data);
        //                        }
        //                    });
        //
        //
        //        });

        $(".deleteUser").click(function() {
            delElement(this);
            return false;
        });


    });


    function delElement(element) {
        var userId = $(element).parent().parent().attr("id");
        //alert('user = ' + userId);
        var projectId = $(element).parent().parent().parent().parent().parent().attr("id");
        //alert('project = ' + projectId);
        $.post("deleteUser.htm", { userId: userId, projectId: projectId },
                function(data) {
                    if (data == '') {
                        $("#" + projectId).find("#" + userId).remove();
                    } else {
                        alert(data);
                    }
                });

    }

</script>

<style type="text/css">


    .projects {
        width: 1000px;
        margin: 0 auto;

    }

    .form {
        width: 1000px;
        margin: 0 auto;
        font-family: sans-serif;
        font-style: normal;

    }

    .form select {
        width: 300px;
        border: medium solid #FFFFFF;
        background-color: #e0e0e0;
    }

    .form td {
        font-size: x-small;
        font-weight: bold;

    }

    input.button {
        cursor: pointer;
        background-color: #FFCC00;
        font-weight: bold;
        width: 100px;

    }

    .users table {
        padding: 5px;
        background-color: #99ccff;
        border-collapse: collapse;
        width: 600px;

    }

    .project_head {

        line-height: 30px;
        background-color: #6699cc;
        margin: 5px;
        font-size: 12px;
        font-family: Verdana;
    }

    .project_body {
        margin: 10px;
    }

    .projects td {

        line-height: 25px;
        font-size: 12px;
        font-family: Verdana;
    }

    .header {
        background-color: #FFCC00;
    }

    .active {
        background-color: #E1FFA7;
    }

    .inactive {
        background-color: #FFDDDC;
    }

    .users td {
        line-height: 15px;

    }

    .title {
        text-align: center;
        font-family: sans-serif;
        font-size: larger;
        color: #6699cc;
        width: 1000px;
        margin: 0 auto;
    }

</style>

<div class="title">Управление проектами</div>
<br>

<div class="projects">
    <c:forEach items="${projects}" var="p">
        <div class="project" id="${p.projectId}">
            <div class="project_head">

                <table width="100%">
                    <tr>
                        <td width="30%" style="font-weight: bold;"><c:out value="${p.projectName}"/></td>
                        <td width="50%"><c:out value="${p.description}"/></td>
                        <c:set var="statusName" value="${p.status.statusName}"/>
                        <td width="10%" align="center"

                                <c:if test="${statusName eq 'active'}"><c:out value="class=active"/></c:if>
                                <c:if test="${statusName eq 'inactive'}"><c:out value="class=inactive"/></c:if>

                                ><c:out value="${p.status.alias}"/></td>
                        <c:url var="editUrl" value="/admin/createProject.htm">
                            <c:param name="action" value="edit"/>
                            <c:param name="projectId" value="${p.projectId}"/>
                        </c:url>
                        <td align="center" width="5%"><a href="${editUrl}"><img style="border:0px;"
                                                                                src="../images/edit.png"
                                                                                alt="Edit"></a></td>
                        <c:url var="deleteUrl" value="/admin/deleteProject.htm">
                            <c:param name="action" value="delete"/>
                            <c:param name="projectId" value="${p.projectId}"/>
                        </c:url>
                        <td align="center"><a href="${deleteUrl}"><img style="border:0px;"
                                                                       src="../images/delete_red.png" alt="Delete"></a>
                        </td>
                    </tr>
                </table>

            </div>
            <div class="project_body">
                Участники проекта
                <div class="users" id="${p.projectId}">
                    <table border="1" id="users${p.projectId}">
                        <tr class="header">
                            <td width="80%">Пользователь</td>
                            <td width="10%">Статус</td>
                            <td width="10%">Действия</td>
                        </tr>
                        <c:forEach items="${p.users}" var="u">
                            <c:set var="userId" value="${u.userId}"/>
                            <tr id="${userId}">
                                <td><c:out value="${u.lastName}"/>&nbsp;<c:out value="${u.firstName}"/></td>
                                <c:set var="userStatus" value="${u.status.statusName}"/>
                                <td align="center"
                                        <c:if test="${userStatus eq 'active'}"><c:out value="class=active"/></c:if>
                                        <c:if test="${userStatus eq 'inactive'}"><c:out value="class=inactive"/></c:if>

                                        ><c:out value="${u.status.alias}"/></td>

                                <td align="center">
                                    <a href="#" class="deleteUser" title="Delete User">
                                        <img style="border:0px;" src="../images/delete_red.png" alt="Delete">
                                    </a>
                                </td>

                            </tr>
                        </c:forEach>
                    </table>
                    <br>
                    <a href="#" style="float:left;" class="add_new_user"><img style="border:0px;"
                                                                              src="../images/add.png"
                                                                              alt="add user"></a>&nbsp;&nbsp;
                    <div class="all_users" style="display:none;">
                        <select name="newUser" class="newUser">
                            <c:forEach items="${users}" var="u">
                                <option value="${u.userId}"><c:out value="${u.lastName} ${u.firstName}"/></option>
                            </c:forEach>
                        </select>&nbsp;
                        <a href="#" class="add_user">Add</a>
                    </div>
                </div>

            </div>
        </div>
    </c:forEach>
</div>

<br>
<form:form method="POST" commandName="newProject" cssClass="form">
    <table style="width:800px">
        <tr>
            <td>Название проекта</td>
            <td>
                <form:input path="projectName"/>
            </td>
            <td><form:errors path="projectName" cssStyle="color:red"/></td>
        </tr>
        <tr>
            <td>Описание</td>
            <td>
                <form:textarea path="description" rows="5" cols="35"></form:textarea>
            </td>
            <td><form:errors path="description" cssStyle="color:red;"/></td>
        </tr>
        <tr>
            <td>Статус</td>
            <td>
                Активна : <form:radiobutton path="status" value="active"/><br>
                Неактивна : <form:radiobutton path="status" value="inactive"/>
            </td>
            <td><form:errors path="status" cssStyle="color:red;"/></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td><input type="submit" value="submit" class="button"></td>
        </tr>
    </table>

</form:form>